<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box1">这是一个ID选择器标签</div>
    <div class="box2">这是一个类选择器标签</div>
    <div>这是一个普通标签</div>

    <button>点击按钮</button>

    <script>
      var element_id = document.getElementById("box1");
      console.log(element_id);
      var element_class = document.getElementsByClassName("box2")[0];
      console.log(element_class);
      var element_tag = document.getElementsByTagName("div")[2];
      console.log(element_tag);

      element_id.innerHTML = '<a href="#">跳转链接</a>';
      element_class.innerText = "修改后的文本";

      element_tag.style.color = "red";
      element_tag.style.fontSize = "20px";

      // DOM 属性绑定事件

      var button_element = document.getElementsByTagName("button")[0];
      console.log(button_element);
      button_element.onclick = function () {
        alert("DOM 绑定点击");
      };
      button_element.addEventListener("click", function () {
        alert("addEventListener 绑定点击");
      });
    </script>
  </body>
</html>
